<template>
  <div class="content">
    <common-head @parking-selected="handleParkingSelected"></common-head>
    <common-search @search="search"></common-search>

    <div class="container">
      <common-list-vue></common-list-vue>
      <van-loading v-if="loading" class="loading-tip" size="24px">
        数据加载中...
      </van-loading>
      <scroller
        ref="myscroll"
        :on-refresh="refresh"
        :on-infinite="infinite"
        class="scroll-view"
        noDataText="暂无更多数据"
      >
        <div
          class="park-list wrapper"
          v-for="(item, index) in parkAddressList"
          :key="index"
          @click="toParkDetail(item.id)"
        >
          <div class="list-head">
            <div class="list-name">
              <span>{{ item.parkingName }}</span>
              <span>总泊车为：{{ item.parkingSpaceCount }}</span>
            </div>
            <div class="list-desc">
              <span>当前占用泊位：{{ item.occupyParkingCount }}</span>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import commonHead from "../../components/xc/commonHead.vue";
import commonListVue from "../../components/xc/commonList.vue";
import commonSearch from "../../components/xc/commonSearch.vue";

export default {
  components: {
    commonHead,
    commonSearch,
    commonListVue
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      isLoading: true,
      flag: 0,
      loading: true,
      parkAddressList: [],
      loading: true,
      parkList: [],
      pageNo: 1,
      loadingoading: false
    };
  },
  created() {},
  mounted() {
    this.pageNo = 1;
    this.getParkAddressList("load");
  },
  methods: {
    search(val) {
      this.$router.push({
        path: "/parkDetail",
        query: {
          cardNumber: val
        }
      });
    },
    handleParkingSelected(val) {
      this.$router.push({
        path: "/parkDetail",
        query: {
          id: val
        }
      });
    },
    refresh() {
      this.pageNo = 1;
      this.getParkAddressList("load");
    },
    infinite() {
      if (this.flag == 1) {
        return;
      }
      this.pageNo += 1;
      this.getParkAddressList("load");
    },
    async getParkAddressList(type) {
      const res = await this.baseService.get(
        `/parking/bizParkingLots/pageList?hasOrder=1&parkingType=20&pageNo=` +
          this.pageNo +
          "&pageSize=" +
          this.pageSize
      );
      let { code, result } = res;
      if (code == 200) {
        this.total = result.total;
        if (this.pageNo == 1 && type == "load") {
          this.parkAddressList = result.records;
          this.$refs.myscroll.finishPullToRefresh(true);
          this.$toast("刷新成功");
        }
        if (this.pageNo != 1) {
          this.parkAddressList = [...this.parkAddressList, ...result.records];
          this.$refs.myscroll.finishInfinite(true);
        }
      } else {
        this.$refs.myscroll.finishInfinite();
        this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">' + res.message + "</p>"
        });
        // todo
        this.$router.push("/pointClock");
      }
    },
    toParkDetail(id) {
      this.$router.push({
        path: "/parkDetail",
        query: {
          id: id
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.content {
  touch-action: pan-y;
}
.container {
  width: 100%;
  background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
  padding: 10px;
}
.park-list {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  overflow: auto;
  .list-head {
    padding: 0px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .list-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      span {
        font-size: 16px;
        font-weight: bold;
      }
      span:nth-child(2) {
        font-size: 12px;
        font-weight: normal;
        color: #999;
      }
    }
    .list-desc {
      width: 100%;
      span {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

/deep/.loading-layer {
  margin-bottom: 80px;
}

/deep/.vux-tab-item {
  font-size: 18px !important;
  color: #c8c9cc !important;
}

/deep/.vux-tab-selected {
  color: #666666 !important;
  font-size: 18px !important;
}
.scroll-view {
  top: 5rem;
  height: auto !important;
  // height: 40vh;
  // background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
  padding: 0px 10px;
}
.loading-tip {
  display: flex;
  justify-content: center;
  padding: 20px;
  color: #666;
}
</style>
